<template>
  <div class="auth">
    <div class="auth-title">{{ title }}</div>
    <div class="auth-content">
      <div class="auth-list" ref="authListRef" :class="{ collapsed: isCollapsed && showToggle }">
        <p class="auth-item boy-background" v-for="(item, index) in visibleAdminList" :key="index">
          <img :src="UserOutlined" alt="" />
          {{ item.userName }}
        </p>
        <!-- <p class="auth-item ellipsis-item" v-if="isCollapsed && showToggle">更多...</p> -->
      </div>
      <div class="toggle-btn" v-if="showToggle" @click="toggleCollapse">
        {{ isCollapsed ? "展开" : "收起" }}
        <el-icon class="toggle-icon" :class="{ 'is-rotate': !isCollapsed }">
          <arrow-down />
        </el-icon>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import UserOutlined from "../assets/images/svg/ UserOutlined.svg";

import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";

// 定义管理员类型接口
interface AdminItem {
  userName: string;
  [key: string]: any; // 允许其他属性
}

const props = defineProps({
  title: {
    type: String,
    default: "Admin",
  },
  adminList: {
    type: Array as () => AdminItem[],
    default: () => [],
  },
});

// 控制展开/收起状态
const isCollapsed = ref(true);
const showToggle = ref(false);
const authListRef = ref<HTMLElement | null>(null);
const hasHiddenItems = ref(false);

// 计算显示的管理员列表
const visibleAdminList = computed(() => {
  // console.log('AdminList接收到的数据:', props.adminList)
  if (!isCollapsed.value || !showToggle.value) {
    return props.adminList;
  }

  // 当收起状态时，只显示指定数量的管理员
  // 如果显示展开/收起按钮，则始终只显示部分管理员
  const maxVisibleItems = Math.min(8, props.adminList.length);
  return props.adminList.slice(0, maxVisibleItems);
});

// 切换展开/收起状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 检查列表高度是否超过43px
const checkHeight = async () => {
  await nextTick();
  if (authListRef.value) {
    // 先将列表设置为展开状态，以获取完整高度
    const originalCollapsed = isCollapsed.value;
    isCollapsed.value = false;

    await nextTick();
    const fullHeight = authListRef.value.scrollHeight;
    // console.log(fullHeight);
    

    // 恢复原来的状态
    isCollapsed.value = originalCollapsed;

    // 如果管理员数量超过8个或者完整高度超过43px，则显示展开/收起按钮
    const shouldShowToggle = props.adminList.length > 8 || fullHeight > 43;

    // 如果状态发生变化，才更新
    if (showToggle.value !== shouldShowToggle) {
      showToggle.value = shouldShowToggle;
      // 强制重新渲染
      nextTick();
    }
  }
};

// 监听adminList变化
watch(
  () => props.adminList,
  (newVal) => {
    // console.log('adminList发生变化:', newVal)
    checkHeight();
  },
  { deep: true, immediate: true }
);

// 组件挂载后检查高度并添加窗口大小变化监听
onMounted(() => {
  checkHeight();
  // console.log(visibleAdminList.value, '11111111');

  // 添加窗口大小变化监听
  window.addEventListener("resize", handleResize);
});

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  // 清除计时器
  if (resizeTimer) clearTimeout(resizeTimer);
});

// 窗口大小变化处理函数
const handleResize = () => {
  // 使用防抖函数处理resize事件，避免频繁触发
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    checkHeight();
  }, 100);
};

// 防抖计时器
let resizeTimer: ReturnType<typeof setTimeout> | null = null;
</script>

<style scoped lang="scss">
.auth {
  display: flex;
  flex-direction: column;
  position: relative;
  // height: 75px;
  // background: salmon;

  .auth-content {
    display: flex;
    position: relative;
    width: 100%;
  }

  .auth-title {
    font-family: PingFang SC, PingFang SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    margin-bottom: 10px;
    color: #2A2A2A;
  }

  .auth-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    width: 100%;
    transition: all 0.3s ease;

    &.collapsed {
      max-height: 84px; // 限制高度为84px
      overflow: hidden;
    }
  }

  .ellipsis-item {
    background: #e6f7ff;
    border-radius: 4px;
    color: #0c6bfa;
    font-weight: bold;
  }

  .auth-item {
    box-sizing: border-box;
    height: 32px;
    padding: 2px 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;

    &.boy-background {
      border-radius: 2px;
      background: #F2F3F5;
    }

    &.girl-background {
      background: #ffeeee;
      border-radius: 4px;
    }

    img {
      display: block;
      margin-right: 5px;
    }
  }

  .toggle-btn {
    width: 80px;
    cursor: pointer;
    color: #0c6bfa;
    font-size: 14px;
    display: flex;
    margin-top: 5px;
    justify-content: center;

    .toggle-icon {
      margin-left: 5px;
      transition: transform 0.3s;

      &.is-rotate {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
